<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .q1 {
            width: 100%;
            height: 20px;
        }

        .q2 {
            width: 100%;
            height: 50px;
        }

        .qq {
            background-color: blue;
            width: 70px;
            height: 40px;
        }

        .w1 {
            border: 1px solid black;
            width: 100%;
        }

        .a1 {
            position: fixed;
            right: 400px;
            background-color: aqua;
        }

        .a2 {
            position: fixed;
            right: 100px;
            background-color: gold;
        }

        .a3 {
            float: right;
        }
    </style>
</head>

<body>
    <h2>发表评论</h2>
    <p>评论人:</p>
    <input type="text" class="q1">
    <p>评论内容:</p>
    <input type="text" class="q2">
    <button class="qq" onclick="ttjj()">发表评论</button>

    <div>

    </div>
</body>

</html>

<script src="./lib/axios.min.js"></script>

<script>
    const page = "1"
    function xr() {
        axios({
            url: "https://hmajax.itheima.net/api/cmtlist",
            method: 'GET',
            params: {
                page: page
            }
        })
            .then(rec => {
                const sss = rec.data.data;
                const kk = sss.map((item, index) => {
                    return `
                    <div class="w1">
            <p><span>${item.content}</span>  <span class="a1">评价人: ${item.username}</span>&nbsp; &nbsp;&nbsp;<span class="a2">评价时间:${item.time}</span> <button class="a3" onclick="sc(${item.id})">删除</button></p>
        </div>
            `
                }).join("")
                document.querySelector("div").innerHTML = kk
            })
    }
    xr()

    const q1 = document.querySelector(".q1")
    const q2 = document.querySelector(".q2")
    const q3 = new Date()

    function tj() {
        const kk = {
            username: q1.value,
            content: q2.value,
            time: q3.value,
            page
        }
        axios({
            url: "https://hmajax.itheima.net/api/addcmt",
            method: 'POST',
            data: kk
        })
            .then(rec => {
                xr()
            })
    }
    function ttjj() {
        tj()
        q1.value=""
        q2.value=""
    }

    function sc(id) {
        var requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };

        fetch(`https://hmajax.itheima.net/api/delcmt?id=${id}`, requestOptions)
            .then(response => response.json())
            .then(rec=>{
                xr()
            })
    }
</script>